<template>
    <div>
        <div class="static" :class="{'active': isActive, 'error': isError}">演示 :class </div>
        <div @click="changeStyle" style="cursor: pointer; background-color: #42b983;margin: 10px auto; width: 100px">更换样式</div>

        <div class="static" :class="['active', 'highlight-font']">演示数组形式 :class </div>

        <div class="static" :class="classes">演示计算属性形式 :class </div>

        <div :style="{'color': 'blue', 'fontSize': '22px'}">演示 :style </div>
        <div :style="styles">演示参数型 :style </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true,
                isError: false,
                styles: {
                    color: 'red',
                    fontSize: 14 + 'px'
                }
            }
        },
        /**
         * 计算属性
         */
        computed: {
            /**
             * 计算属性是有缓存的，只有当计算属性所依赖的数据发生变化时，才会重新取值
             * 比 methods 中的方法效率更好
             * @returns {string}
             */
            classes: function () {
                return ['active', 'highlight-font', 'margin'];
            }
        },
        methods: {
            changeStyle() {
                this.isActive = !this.isActive;
                this.isError = !this.isError;
            }
        }
    }
</script>
<style scoped>
    .static {
        font-size: 32px;
    }

    .active {
        background-color: blueviolet;
    }

    .error {
        background-color: red;
    }

    .highlight-font {
        color: white;
    }

    .margin {
        margin: 10px auto;
    }
</style>